<template>
  <d2-container>
    <div class="pt-3">
      <el-form :model="formApp" label-width="100px" ref="form">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <div style="width: 40%;" class="mt-3">
              <el-form-item label="应用名称" prop="title">
                <el-input v-model="formApp.title" placeholder="应用名称"></el-input>
              </el-form-item>
            </div>
            <div class="mt-2">
              <el-form-item label="分类" prop="category">
                <el-select v-model="formApp.category" placeholder="请选择分类">
                  <el-option v-for="item in categoriesList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 30%;" class="mt-3">
              <el-form-item label="应用版本" prop="version">
                <el-input v-model="formApp.version" placeholder="应用版本"></el-input>
              </el-form-item>
            </div>
            <div style="width: 60%;" class="mt-3">
              <el-form-item label="下载地址" prop="download_link">
                <el-input v-model="formApp.download_link" placeholder="下载地址"></el-input>
              </el-form-item>
            </div>
            <div class="mt-3">
              <el-form-item label="应用售价" prop="price">
                <el-input-number v-model="formApp.price" :precision="2" :min="0" :step="1"></el-input-number>
              </el-form-item>
            </div>
            <div class="mt-3">
              <el-form-item label="下载量" prop="download_count">
                <el-input-number v-model="formApp.download_count" :precision="0" :min="0" :step="1"></el-input-number>
              </el-form-item>
            </div>
            <div class="row-ac mt-3">
              <div>
                <el-form-item label="是否免费" prop="is_free">
                  <el-switch v-model="formApp.is_free"></el-switch>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="是否推荐" prop="is_recommend">
                  <el-switch v-model="formApp.is_recommend"></el-switch>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="是否热门" prop="is_hot">
                  <el-switch v-model="formApp.is_hot"></el-switch>
                </el-form-item>
              </div>
            </div>
            <div class="mt-3">
              <el-form-item label="应用封面" prop="cover_img">
                <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                  :on-success="handleCoverSuccess" :headers="headersobj">
                  <img v-if="formApp.cover_img" :src="formApp.cover_img" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="details">
            <div style="width: 70%;height: 600px;" class="mt-3">
              <el-form-item prop="content">
                <d2-quill v-model="formApp.details" />
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="row" style="width: 80%;margin-top: 20px;">
          <el-form-item>
            <el-button plain @click="toBack">取消</el-button>
            <el-button type="primary" @click="submitForm">保存并提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    classapplicationListUrl,
    softwareDetailUrl,
    softwareCreateUrl,
    softwareUpdateUrl
  } from '@/utils/application'
  import {
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  import util from '@/libs/util'
  import d2Quill from '@/components/d2-quill'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        handleStata: false,
        headersobj: '',
        getAppId: '',
        formApp: {
          title: '',
          category: '',
          cover_img: '',
          download_link: '',
          version: '',
          price: '',
          is_free: false,
          is_recommend: false,
          is_hot: false,
          details: '',
          download_count: ''
        },
        categoriesList: [],
        actionUrl: baseURL + imagesUploadUrl,
        activeName: 'first',
      }
    },
    mounted() {
      if (this.$route.query.appId) {
        this.getAppId = this.$route.query.appId
        this.getApplicationDetail(this.getAppId)
        this.handleStata = true
      } else {
        this.handleStata = false
      }
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
    },
    created() {
      this.$get(classapplicationListUrl).then(res => {
        this.categoriesList = res.data.data.list
        console.log('分类', this.categoriesList);
        this.formApp.category = this.categoriesList[0].id
      })
    },
    methods: {
      getApplicationDetail(appId) {
        this.$get(softwareDetailUrl + appId + '/').then(res => {
          if (res.data.code == 200) {
            this.formApp = {
              title: res.data.data.title,
              category: res.data.data.category,
              cover_img: res.data.data.cover_img,
              download_link: res.data.data.download_link,
              version: res.data.data.version,
              price: res.data.data.price,
              is_free: res.data.data.is_free,
              is_recommend: res.data.data.is_recommend,
              is_hot: res.data.data.is_hot,
              details: res.data.data.details,
              download_count: res.data.data.download_count
            }
          }
        })
      },
      handleCoverSuccess(val) {
        this.formApp.cover_img = val.data.url
      },
      submitForm() {
        if (this.handleStata) {
          this.$put(softwareUpdateUrl + this.getAppId + '/', this.formApp).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }else{
          this.$post(softwareCreateUrl, this.formApp).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      },
      toBack(){
         this.$router.go(-1)
      }
    }
  }
</script>

<style>
</style>
